<script setup lang="ts">
defineOptions({ name: 'articlePage' })
import { ref, onMounted } from 'vue'
import { getArticleList } from '@/api/article'
import type { articleModel ,CustomRows} from '@/types/data'
import { useRouter } from 'vue-router'
const router = useRouter()
// import articleItem from './components/ArticleItem.vue'
const articleListParams = ref<articleModel>({
    current: 1,
    pageSize: 10,
    stem: '',
    keyWord: '',
    sorter: 'weight_desc',
})
const loading=ref(true)
const finished=ref(false)
const active = ref('weight_desc')
const articleRows = ref<CustomRows>([])
const articleList = async () => {
    const res = await getArticleList(articleListParams.value)
    console.log(res.data);
    // articleRows.value = res.data.rows
    if(res.data.rows.length<10){
        finished.value=true
        return
    }
    console.log(articleRows.value);
    
    articleRows.value.push(...res.data.rows)
    loading.value=false
    articleListParams.value.current++
}
//下拉加载
const onLoad = ()=>{
    articleList()
}


const getDetail = (id: string) => {
    router.push({
        path: '/articleDetail',
        query: {
            id,
        },
    })
}
type tabType={
    name:string
}
//tab切换
const handleChange=(val:tabType)=>{
    console.log(val)
    articleListParams.value.sorter=val.name
    articleListParams.value.current=1
    articleRows.value=[]
    finished.value=false
    loading.value=true
    onLoad()
}

onMounted(() => {
    articleList()
})
</script>
<template>
    <van-tabs v-model:active="active" shrink line-width="20px" line-height="2px" @click-tab="handleChange">
        <van-tab title="推荐" name="weight_desc">
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                >
            <div v-for="item in articleRows" :key="item.id" @click=getDetail(item.id)>
                <van-cell class="article-item">
                    <template #title>
                        <div class="head">
                            <img :src="item.avatar" alt="" />
                            <div class="con">
                                <p class="title van-ellipsis">{{ item.stem }}</p>
                                <p class="other">标题{{ item.creator }} | 时间 {{ item.createdAt }}</p>
                            </div>
                        </div>
                    </template>
                    <template #label>
                        <div class="body van-multi-ellipsis--l2">
                           {{ item.content.replace(/<[^>]+>/g,'')  }}
                        </div>
                        <div class="foot">点赞{{ item.likeCount }} | 浏览 {{ item.views }} </div>
                    </template>
                </van-cell>
            </div>
          </van-list>
          <div style="width: 100%;height: 50px;"></div>
        </van-tab>
        <van-tab title="最新" name="">
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                >
            <div v-for="item in articleRows" :key="item.id" @click=getDetail(item.id)>
                <van-cell class="article-item">
                    <template #title>
                        <div class="head">
                            <img :src="item.avatar" alt="" />
                            <div class="con">
                                <p class="title van-ellipsis">{{ item.stem }}</p>
                                <p class="other">标题{{ item.creator }} | 时间 {{ item.createdAt }}</p>
                            </div>
                        </div>
                    </template>
                    <template #label>
                        <div class="body van-multi-ellipsis--l2">
                           {{ item.content.replace(/<[^>]+>/g,'')  }}
                        </div>
                        <div class="foot">点赞{{ item.likeCount }} | 浏览 {{ item.views }} </div>
                    </template>
                </van-cell>
            </div>
          </van-list>
          <div style="width: 100%;height: 50px;"></div>
            <!-- <article-item /> -->
        </van-tab>
    </van-tabs>
</template>

<style lang="scss" scoped>
.article-item{
    border-bottom: 1px solid #eee;
.head{
    display: flex;
    align-items: center;
    img{
        width: 35px;
    }
    p{
        margin: 0;
    }
    .con{
        margin-left: 10px;
        .title{
            font-size: 16px;
        }
        .other{
            font-size: 12px;
            color: #999;
        }
    }
}
.body{
    margin-top: 10px;
}
.foot{
    font-size: 12px;
    color: #999;
    margin-top: 10px;
}

}
</style>